<template>
  <div>
    <a-card :bordered="true" style="margin-bottom:30px" title="普通表单">
      <a-row>
        <a-col :span="4">
          <div class="example-side">
            demo1:普通表单
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <a-button @click="() => {$refs.ordinaryFrom.init('', 'add')}" type="primary">填写表单</a-button>
            <a-button @click="() => {$refs.ordinaryFrom.init('', 'show')}" type="primary" style="margin-left: 14px">回显表单</a-button>
            <a-button @click="() => {$refs.ordinaryFrom.init('', 'edit')}" type="primary" style="margin-left: 14px">编辑表单</a-button>
            <!--------------------------------------------------------------------------------------demo1---start-->
            <ordinary-from @ok="demo1" ref="ordinaryFrom"/>
            <!--------------------------------------------------------------------------------------demo1---end-->
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          ps: 双列，包含验证，各种输入框
        </a-col>
      </a-row>
    </a-card>

    <a-card :bordered="true" title="高级表单">
      <a-row>
        <a-col :span="4">
          <div class="example-side">
            demo1:高级表单
          </div>
        </a-col>
        <a-col :span="8">
          <div class="example-side">
            <a-button @click="() => {$refs.advancedFrom.init('', 'add')}" type="primary">展开表单</a-button>
            <!--------------------------------------------------------------------------------------demo1---start-->
            <advanced-from @ok="demo1" ref="advancedFrom"/>
            <!--------------------------------------------------------------------------------------demo1---end-->
          </div>
        </a-col>
        <a-col :span="12" class="example-side">
          ps:
        </a-col>
      </a-row>
    </a-card>

  </div>
</template>

<script>
import ordinaryFrom from './OrdinaryFrom'
import advancedFrom from './AdvancedFrom'

export default {
  name: 'Index',
  components: {
    ordinaryFrom,
    advancedFrom
  },
  data () {
    return {}
  },
  created () {
  },
  methods: {
    demo1 () {

    },
    demo2 () {

    }
  }
}
</script>

<style scoped>
</style>
